<template>
    <md-card>
        <md-card-header class="card-chart" :data-background-color="dataBackgroundColor">
            <div :id="chartId" class="ct-chart"></div>
        </md-card-header>

        <md-card-content>
            <slot name="content"></slot>
        </md-card-content>

        <md-card-actions md-alignment="left">
            <slot name="footer"></slot>
        </md-card-actions>
    </md-card>
</template>
<script>
    import echarts from 'echarts'
    import axios from 'axios'

    export default {
        name: "chart-card",
        props: {
            // footerText: {
            //   type: String,
            //   default: ""
            // },
            // headerTitle: {
            //   type: String,
            //   default: "Chart title"
            // },
            chartType: {
                type: String,
                default: "trade" // Line | Pie | Bar
            },
            // chartOptions: {
            //   type: Object,
            //   default: () => {
            //     return {};
            //   }
            // },
            // chartResponsiveOptions: {
            //   type: Array,
            //   default: () => {
            //     return [];
            //   }
            // },
            // chartData: {
            //   type: Object,
            //   default: () => {
            //     return {
            //       labels: [],
            //       series: []
            //     };
            //   }
            // },
            dataBackgroundColor: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                chartId: "chart1"
            };
        },
        methods: {
            /***
             * Initializes the chart by merging the chart options sent via props and the default chart options
             */
            initChart() {
                let chartIdQuery = `${this.chartId}`;
                let chartType = `${this.chartType}`;
                let chart = echarts.init(document.getElementById(chartIdQuery));

                chart.clear();
                chart.showLoading();

                let sTime = (chartType === 'trade' ? this.$cookies.get('t_sTime') : this.$cookies.get('w_sTime'));
                let eTime = (chartType === 'trade' ? this.$cookies.get('t_eTime') : this.$cookies.get('w_eTime'));
                let column = (chartType === 'trade' ? this.$cookies.get('t_column') : this.$cookies.get('w_column'));
                let other = (chartType === 'trade' ? this.$cookies.get('t_subject') : this.$cookies.get('w_city'));

                axios
                    .get('http://localhost:8080/' + chartType + '/get',
                        {
                            params: {
                                sTime: sTime,
                                eTime: eTime,
                                column: column,
                                subject: other,
                            }
                        })
                    .then(function (response) {
                        console.log(response.data.content.category);
                        chart.setOption({
                            xAxis: {
                                type: 'category',
                                data: response.data.content.category
                            },
                            yAxis: {
                                min: response.data.content.min,
                                type: 'value'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            dataZoom: [
                                {
                                    type: 'slider',
                                    xAxisIndex: 0,
                                    start: 10,
                                    end: 60
                                },
                                {
                                    type: 'inside',
                                    xAxisIndex: 0,
                                    start: 10,
                                    end: 60
                                },
                            ],
                            series: [{
                                name: response.data.content.column,
                                data: response.data.content.data,
                                type: 'line',
                                smooth: true,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                }
                            }]
                        });
                        chart.hideLoading();
                    })
                // console.log(chartIdQuery);
                // this.$chart.line1(chartIdQuery,
                //         chartType
                // );
                // // this.$Chartist[this.chartType](
                //   chartIdQuery,
                //   this.chartData,
                //   this.chartOptions
                // );
            },
            /***
             * Assigns a random id to the chart
             */
            // updateChartId() {
            //   var currentTime = new Date().getTime().toString();
            //   var randomInt = this.getRandomInt(0, currentTime);
            //   this.chartId = `div_${randomInt}`;
            // },
            // getRandomInt(min, max) {
            //   return Math.floor(Math.random() * (max - min + 1)) + min;
            // }
        },
        mounted() {
            // this.updateChartId();
            this.$nextTick(this.initChart);
        }
    };
</script>
